<template>
    <div class="register-container">
        <div class="register-box">
            <div
                style="background-color: white; color: #000; padding: 50px 30px; margin-left: 300px; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0,0.1);">
                <el-form ref="formRef" :rules="data.rules" :model="data.form" style="width: 300px">
                    <div style="margin-bottom: 30px;font-size: 24px;color: blue;text-align: center; font-weight: bold;">
                        欢迎注册后台管理系统</div>
                    <el-form-item prop="username">
                        <el-input size="large" v-model="data.form.username" placeholder="请输入账号" prefix-icon="User">
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="no">
                        <el-input size="large" v-model="data.form.no" placeholder="请输入工号" prefix-icon="User">
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input show-password size="large" v-model="data.form.password" placeholder="请输入密码"
                            prefix-icon="Lock">
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="confirmPassword">
                        <el-input show-password size="large" v-model="data.form.confirmPassword" placeholder="请确认密码"
                            prefix-icon="Lock">
                        </el-input>
                    </el-form-item>
                    <div style="margin-bottom: 20px;">
                        <el-button type="primary" size="large" @click="register" style="width: 100%;">注 册</el-button>
                    </div>
                    <div style="text-align: right;">已有账号？<router-link style="color: blue;text-decoration: none;"
                            to="/login">立即登录</router-link></div>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { User, Lock } from '@element-plus/icons-vue';
import request from '@/utils/request.js';
import { ElMessage } from 'element-plus';

const validatePass = (rule, value, callback) => {
    if (!value) {
        callback(new Error('请再次确认密码'))
    } else if (value !== data.form.password) {
        callback(new Error("两次输入的密码不一致"))
    } else {
        callback()
    }
    }

const data = reactive({
    form: {
 
    },
    rules: {
        username: [
            {
                required: true,
                message: '请输入账号',
                trigger: 'blur'
            }
        ],password: [
            {
                required: true,
                message: '请输入密码',
                trigger: 'blur'
            }
        ],
        confirmPassword: [
            {
                validator: validatePass,
                trigger: 'blur'
            }
        ]
    }

})
const formRef = ref();



const register = () => {
    formRef.value.validate((valid) => {
        if (valid) {
            request.post('/register', data.form).then(res => {
                if (res.code === '200') { // 注册成功
                    ElMessage.success('注册成功');
                    setTimeout(() => {
                        location.href = '/login'; // 跳转到登录页面
                    },500)

                } else {
                    ElMessage.error(res.msg);
                    
                }


                
            })
        }


    })


    
}



</script>
<style scoped>
.register-container {
    height: 100vh;
    overflow: hidden;
    background-image: url('@/assets/bg.png');
    background-size: cover;
}
.register-box {
    width: 50%;
    right: 0;
    height: 100%;
    display: flex;
    align-items: center;
    position: absolute;
}

</style>